import React, { Component } from 'react'
import { StyleSheet, View ,TextInput,Dimensions, Button, Alert} from 'react-native'

export default class TextInputs extends Component {
    constructor(){
        super()
        this.state ={
            username : '',
            password : ''
        }
    }
    doLogin = () => {
        Alert.alert('登录成功', '欢迎 '+ this.state.username + ' 登录')
    }
  render() {
    return (
      <View style={[styles.Component]}>
        <TextInput 
            style={[styles.textInput]}
            placeholder='请输入用户名'
            value={this.setState.username}
            onChangeText={(val)=>{
                this.setState({username:val})
            }}
        />
        <TextInput 
            style={[styles.textInput]}
            placeholder='请输入密码'
            secureTextEntry={true}
            value={this.setState.password}
            onChangeText={(val)=>{
                this.setState({password:val})
            }}
        />

        <TextInput 
            style={[styles.textInput]}
            placeholder='请输入手机号'
            keyboardType='number-pad'
        />

        <TextInput 
            style={[styles.textInput]}
            placeholder='请输入介绍'
            multiline={true}
            numberOfLines={5}
            textAlignVertical='top'
        />

        <View style={[styles.btn]}>
            <Button title='登录' onPress={this.doLogin}/>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
    Component:{
        flex:1,
        justifyContent:'center',
    },
    textInput:{
        margin: 10,
        borderWidth: 1,
        borderColor: 'red',
        paddingHorizontal: 10,
    },
    btn:{
        margin: 10,
    }
})
